﻿<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="row clearfix">
                <div class="col-md-12 well" align="center">
                    <form role="form">
                        <div class="col-xs-4">
                            <input class="form-control input-lg" type="text" placeholder="Vacation Destination" g-places-autocomplete ng-model="city" />
                        </div> <button type="submit" class="btn btn-default" ng-click="search()">&nbsp;Search</button>&nbsp;<button type="submit" class="btn btn-default" ng-click="addVacay(city)">Save Vacation</button>
                    </form>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4" ng-repeat="z in data2">
                    <div class="thumbnail">
                        <img src="https://maps.googleapis.com/maps/api/place/photo?maxwidth=300&maxheight=300&key=AIzaSyBKLw7xomUeuWhxLC9L71lfCBuamTI9K58&photoreference={{z.photos[0].photo_reference}}" alt="300x200" />
                        <div class="caption">
                            <h3>
                                {{z.name}}
                            </h3>
                                <button class="btn btn-success" style="position: absolute; bottom:3%; left: 3%;" ng-click="addVacay(z.name)">Add to My Vacation!<i class="icon-ok icon-white"></i></button>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row clearfix">
                <div class="col-md-6">
                    <img class="img-rounded" alt="" src="https://maps.googleapis.com/maps/api/staticmap?center={{city}}&zoom=12&size=500x500" />

                </div>
                <div class="col-md-6">
                    <h2>Weather in {{data1.city.name}} Now</h2>
                    <img class="img-rounded" alt="140x140" src="http://lorempixel.com/200/200/nature/" />
                    <div class="container" id="weather">
                        <ul ng-hide="none">
                            <li>Temperature: {{data1.list[0].temp}}</li>
                            <li>Weather Details: {{data1.description}}</li>

                            <img src="{{icon}}" />
                            <li>Latitude: {{data1.coord.lat}}</li>
                            <li>Longitude: {{data1.coord.lon}}</li>
                        </ul>
                        <table ng-repeat="x in data1.list">
                            <tr>
                                <td>
                                    <table>
                                        <tr>
                                            <th>Day <span>{{date | date:'EEEE'}}</span></th>
                                        </tr>
                                        <tr>
                                            <td>{{x.pressure}}</td>
                                            <td>{{x.humidity}}</td>
                                            <td>{{x.speed}}</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>